<template>
	<view>
		<view style="display: flex;flex-direction: column;">
			<view style="margin-top: 10px; display: flex;justify-content: space-between; align-items: center;">
				<text>账号</text>
			<text>{{user.userAccount}}</text>
			</view>
			<view style="margin-top: 10px; display: flex;justify-content: space-between; align-items: center;">
				<text>头像</text>
				<image :src="user.userImage" mode="aspectFit" style="width: 60rpx;height: 60rpx;"></image>
			</view>
			<view style="margin-top: 10px;  display: flex;justify-content: space-between; align-items: center;">
				<text>昵称</text>
				<text>{{user.userName}}</text>
			</view>
			<view style="margin-top: 10px;  display: flex;justify-content: space-between; align-items: center;">
				<text>性别</text>
				<text>{{user.userSex}}</text>
			</view>
			<view style="margin-top: 10px;  display: flex;justify-content: space-between; align-items: center;">
				<text>出生日期</text>
				<text>{{user.userBirth}}</text>
			</view>
			<view style="margin-top: 10px;  display: flex;justify-content: space-between; align-items: center;">
				<text>手机号</text>
				<text>{{user.userPhone}}</text>
			</view>
			<view style="margin-top: 10px;  display: flex;justify-content: space-between; align-items: center;">
				<text>简介</text>
				<text>{{user.userIndividuation}}</text>
			</view>
			<button type="primary" @click="prim">修改</button>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="修改个人信息" @confirm="confirm">
				<uni-forms ref="form" >
					<uni-forms-item label="账号" name="">
						<uni-easyinput  v-model="updateUser.userAccount" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="上传头像" name="" v-model="updateUser.userImage" :required="true">
						<uni-file-picker limit="1" @select="select"></uni-file-picker>
					</uni-forms-item>
					<uni-forms-item label="昵称" name="" :required="true">
						<uni-easyinput v-model="updateUser.userName" placeholder="请输入账号昵称" />
					</uni-forms-item>
					<uni-forms-item label="性别" name="" :required="true">
						<radio-group @change="change">
							<label>
								<radio value="男" :checked="updateUser.userSex=='男'" /><text>男</text>
							</label>
							<label>
								<radio value="女" :checked="updateUser.userSex=='女'"/><text>女</text>
							</label>
						</radio-group>
					</uni-forms-item>
					<uni-forms-item label="出生年月" name="" :required="true">
						<picker mode="date" @change="dateChange">
							<view>{{updateUser.userBirth}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="" :required="true">
						<uni-easyinput v-model="updateUser.userPhone" placeholder="请输入你的手机号码" />
					</uni-forms-item>
					<uni-forms-item label="个性化简介" name="">
						<uni-easyinput type="textarea" v-model="updateUser.userIndividuation" placeholder="请输入你的个性化简介" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				updateUser:{
					userId:null,
					userAccount:"",
					userBirth:"",
					userImage:"",
					userIndividuation:"",
					userName:"",
					userPhone:"",
					userSex:""
				},
				login:{},
				imageIndex:0,
			}
		},
		methods: {
			confirm(){
				uni.request({
					url: this.api.updateInformation,
					method: 'PUT',
					data:{
						userId:this.updateUser.userId,
						userAccount:this.updateUser.userAccount,
						userBirth:this.updateUser.userBirth,
						userImage:this.updateUser.userImage,
						userIndividuation:this.updateUser.userIndividuation,
						userName:this.updateUser.userName,
						userPhone:this.updateUser.userPhone,
						userSex:this.updateUser.userSex,
						imageIndex:this.imageIndex
					},
					success: res => {
					
							if(res.data.code==200){
								this.login=res.data.obj
								
									this.login.userImage="http://127.0.0.1:8989/"+this.login.userImage
								
								uni.setStorageSync('token',this.login)
									this.user=uni.getStorageSync('token')
									console.log(this.user);
									this.imageIndex=0
							
						}
						else{
							uni.showToast({
								title: res.data.message,
								icon:"error"
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			select(e) {
				console.log(e);
				uni.uploadFile({
					url: this.api.uploading,
					filePath: e.tempFilePaths[0],
					name: "file",
					success: (res) => {
						console.log("res: " + JSON.stringify(res));
						let imageurl = JSON.parse(res.data)
						console.log(imageurl);
						this.updateUser.userImage = imageurl.obj.url
						this.imageIndex=1
						console.log(this.updateUser.userImage);
					}
				})
			},
			change(e) {
				console.log(e);
				this.updateUser.userSex = e.detail.value
			},
			dateChange(e) {
				console.log(e);
				this.updateUser.userBirth = e.detail.value
			},
			prim(){
				this.updateUser=JSON.parse(JSON.stringify(this.user))
				// this.updateUser=this.user	
				this.$refs.popup.open()
			}
		},
		onLoad() {
			if(uni.getStorageSync('token'))
			this.user=uni.getStorageSync('token')
			console.log(this.user);
		}
	}
</script>

<style>

</style>
